<style scoped>
    .box{
        padding: 0 30px;
    }
</style>

<template>
    <div class="">
        <product-title></product-title>
        <div class="box">
            <div class="pro-con-f">
                <Row>
                    <!-- <Col  :md="24" :lg="20">
                    <Form ref="" :model="searchForm" inline>
                        <Form-item label="快速搜索">
                               
                        </Form-item>
                        <Form-item prop="user">
                            <Input type="text" v-model="searchForm.name" placeholder="佣金名称" />
                        </Form-item>
                        <Form-item>
                            <Select v-model="searchForm.ptid" filterable placeholder="产品名称">
                                <Option value="0">请选择</Option>
                                <Option :value="key" v-for="(value,key) in proList" :key="key">{{value.name}}</Option>
                            </Select>
                        </Form-item>
                        <Form-item>
                            <Select v-model="searchForm.role_id" placeholder="角色" style="width: 120px">
                                <Option value="0">请选择</Option>
                                <Option :value="item.id" v-for="item in roleList" :key="item.id">{{item.name}}</Option>
                            </Select>
                        </Form-item>
                        <Form-item>
                            <Button type="primary" icon="ios-search" @click="search()">搜索</Button>
                        </Form-item>
                    </Form>
                    </Col> -->
                    <Col :md="21" :lg="21">
                        <h3 class="searchH3">{{this.$route.params.name}}的代理协议</h3>
                    </Col>
                    
                    <Col :md="3" :lg="3" class="textR" v-if="feeList.length==0">
                        <Button type="success" size="large" class="fr mg10 btnCreate" @click="createPro" >
                            <Icon type="plus-round"></Icon>&nbsp;新增</Button>
                    </Col>

                </Row>
            </div>
            <div class="highlight_table">
                <Table stripe border :columns="columns1" :data="feeList" @on-current-change="currentChange" highlight-row class="table1"></Table>
            </div>
            <div id="footer" class="textL pt22" >
                <Row>
                    <i-col :md="12" :lg="12">
                        <i-button type="primary" :disabled="disabled" @click="toDetail">编辑</i-button>
                        <!-- <i-button type="error" :disabled="disabled" @click="remove">删除</i-button> -->
                    </i-col>
                    <Col :md="12" :lg="12" class="textR">
                        <!-- <Page :total="listTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange" placement="top"></Page> -->
                    </Col>
                </Row>
            </div>
        </div>
        
        <!-- <Spin size="large" fix v-if="spinShow"></Spin> -->
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import productTitle from '../../components/productTitle'
import { getFeeList,delFee} from '../../api/fee'
import { getRoleAll } from '../../api/role'





import {_agency_list,_agency_del} from '../../api/product_v2'

export default {
    data() {
        return {
            columns1: [
                {
                    type: 'index',
                    title:'序号',
                    width: 60,
                },
                {
                    title: '佣金名称',
                    key: 'name',
                },
                {
                    title: '产品名称',
                    key: 'pro_name',
                },
                {
                    title: '开始时间',
                    key: 'start_date',
                    render:(h,params)=>{
                        return h('div',[
                            h('span',params.row.start_date.slice(0,10))
                        ])
                    }
                },
                {
                    title: '结束时间',
                    key: 'stop_date',
                    render:(h,params)=>{
                        return h('div',[
                            h('span',params.row.stop_date.slice(0,10))
                        ])
                    }
                }
                // {
                //     title: '角色',
                //     key: 'role_name',
                // },
                // {
                //     title: '操作',
                //     key: 'action',
                //     width: 150,
                //     render: (h, params) => {
                //         return h('div', [
                //             h('Button', {
                //                 props: {
                //                     type: 'primary',
                //                     size: 'small'
                //                 },
                //                 style: {
                //                     marginRight: '5px'
                //                 },
                //                 on: {
                //                     click: () => {                                      
                //                         this.toDetail(params.row.id)
                //                     }
                //                 }
                //             }, '编辑'),
                //             h('Button', {
                //                 props: {
                //                     type: 'error',
                //                     size: 'small'
                //                 },
                //                 on: {
                //                     click: () => {
                //                         this.remove(params.row.id)
                //                     }
                //                 }
                //             }, '删除')
                //         ]);
                //     }
                // }
            ],
            feeList:[

            ],
            proList:[

            ],
            roleList:[

            ],
            //搜索的表格数据
            searchForm: {

            }, 
            cateOneAll: [], //一级分类列表
            
            listTotal: 0, //产品总数
                                       
            page: 1,
            pagesize: 10,
            disabled:true,
        };
    },
    components: {
        productTitle
    },
    computed:{
        

    },
    created() {
        // this.getList()
        // // this.getProList()
        // this.getRole()
    },
    methods: {
        currentChange(current,oldCurrent){
            this.current = current;
            this.disabled = false;
        },
        //搜索
        search(){
           this.getList(); 
        },
        getList() {
            let _param = this.searchForm;
                _param.p = this.page;
                _param.pagesize = this.pagesize;
                _param.mid = this.$route.params.id;
            new Promise((resolve, reject) => {
                _agency_list(_param).then(response => {
                    if(response.data.err == 0){
                        //开启停止在代理协议列表页
                        // this.feeList = response.data.data.list
                        // this.listTotal = response.data.data.total


                        //开启直接跳转代理协议修改、新增页面
                        if(response.data.data.list.length){
                            this.$router.push({name:'agency_update',params:{id:response.data.data.list[0].id}})
                        }else{
                            this.$router.push({name:'agency_create'})
                        }
                    } else {
                        this.$Message.error(response.data.info);
                    }                       
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        //获取产品列表
        // getProList() {
        //     new Promise((resolve, reject) => {
        //         getProListAll().then(response => {
        //             if(response.data.err == 0){
        //                 this.proList = response.data.data
        //             } else {
        //                 this.$Message.error(response.data.info);
        //             }                       
        //             resolve();
        //         }).catch(error => {
        //             reject(error);
        //         });
        //     });
        // },
        //获取角色列表
        getRole() {
            new Promise((resolve, reject) => {
                getRoleAll().then(response => {
                    if(response.data.err == 0){
                        this.roleList = response.data.data
                    } else {
                        this.$Message.error(response.data.info);
                    }                       
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        toDetail() {            
            this.$router.push({name:'agency_update',params:{ id: this.current.id }})
        },
        remove() {
            this.$Modal.confirm({
                title: '提示',
                content: '是否要删除该条记录?',
                onOk: () => {
                    var _param = {
                        agreement_id:this.current.id
                    }
                    new Promise((resolve, reject) => {
                        _agency_del(_param).then(response => {
                            console.log(response.data)
                            if(response.data.err == 0){
                                this.$Message.success(response.data.info);
                                this.getList();
                            } else {
                                this.$Message.error(response.data.info);
                            }                       
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
                },
            });
            
        },
        createPro() {
            this.$router.push({'name':'agency_create',params:{id:this.$route.params.id,name:this.$route.params.name}});
        },
        pageSizeChange(value){
            this.pagesize = value;
            this.getList();
        },
        pageChange(value){
             this.page = value;
             this.getList();
        }
                                                                                            
    },
    mounted () {
        this.getList()
        // this.getProList()
        // this.getRole()
    },

};
</script>
